<template>
  <div>
    <el-dialog title="查看详情" width="1000px" class="icon-dialog" :visible.sync="show" :before-close="closeForm"
      append-to-body @open="open">
      <el-form ref="form" :size="size" :model="form" :label-width="$store.getters.device !== 'mobile'?'18%':'90px'">
        <table class="table table-bordered" align="center" width="100%"
          style="word-break:break-all; margin-bottom:20px;  font-size:13px;">
          <tbody>
            <tr>
              <td class="title" width="100">拼团编号：</td>
              <td>
                {{ form.sn }}
              </td>
            </tr>
            <tr>
              <td class="title" width="100">团长：</td>
              <td>
                {{ form.nickname }}
              </td>
            </tr>
            <tr>
              <td class="title" width="100">开团时间：</td>
              <td>
                {{ form.found_time }}
              </td>
            </tr>
            <tr>
              <td class="title" width="100">拼团金额：</td>
              <td>
                {{form.TuanGoods.tuan.price}}
              </td>
            </tr>
            <tr>
              <td class="title" width="100">商品信息：</td>
              <td>
                <div v-if="form.TuanGoods">
                  <div class="image__preview">
                    <el-image v-if="form.TuanGoods.goods.image" class="table_list_pic" :src="form.TuanGoods.goods.image"
                      :preview-src-list="[form.TuanGoods.goods.image]" />
                  </div>
                  <div class="goodstext">
                    <div>{{ form.TuanGoods.goods.name+'\n' }}</div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <el-table
          ref="multipleTable"
          row-key="id"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :border="false"
          :stripe="true"
          class="eltable"
          :data="form.TuanFollow"
          style="width: 100%;margin-bottom:50px;"
        >
          <el-table-column align="center" type="" property="id" label="编号"  width="80" />
          <el-table-column
            align="center"
            type=""
            property="avatar"
            label="头像"
            show-overflow-tooltip
            width="90"
          >
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  v-if="scope.row.avatar"
                  class="table_list_pic"
                  :src="scope.row.avatar"
                  :preview-src-list="[scope.row.avatar]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            property="nickname"
            label="参团人"
            width=""
          />
          <el-table-column
            align="left"
            property="is_robot"
            label="是否机器人"
            show-overflow-tooltip
            width=""
          />
          <el-table-column
            align="left"
            property="pay_time"
            label="支付时间"
            show-overflow-tooltip
            width=""
          />
          <el-table-column
            align="left"
            property="status"
            label="状态"
            show-overflow-tooltip
            width=""
          />
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'tuanfounddetail',
    components: {},
    props: {
      show: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: 'mini'
      },
      info: {
        type: Object
      }
    },
    data() {
      return {
        form: {
          TuanGoods: {
            goods:[],
            tuan:[]
          }
        },
        loading: false
      }
    },
    watch: {
      show(val) {}
    },
    methods: {
      open() {
        this.form = this.info
      },
      closeForm() {
        console.log('ddddd');
        this.$emit('update:show', false)
        this.loading = false
        if (this.$refs['form'] !== undefined) {
          this.$refs['form'].resetFields()
        }
      }
    }
  }
</script>
<style>
  .image__preview {
    float: left;
    padding-right: 5px;
  }

  .goodstext {
    float: left;
    padding-left: 5px;
    width: 200px;
  }

  .table_list_pic {
    width: 60px;
    height: 60px;
  }
</style>
